<template>
  <div class="container1" :class="{ print: type == '打印' }">
    <DocHeader
      :title="title"
      fromDoc="pressureUlcers"
      main-diagnosis
      :bottomBorder="false"
    >
      <div slot="before" class="bor-t-box"></div>
    </DocHeader>
    <div class="content">
      <span>压疮病史：</span>
      <el-radio v-model="pageData.history" label="无" />
      <el-radio v-model="pageData.history" label="有" />
      <span class="ml-10">次数：</span>
      <input
        v-model="pageData.historyTimes"
        :disabled="pageData.history == '无'"
        class="w-5 p-2 m-0"
      />
      <span class="ml-50">本次发生时间：</span>
      <input v-model="pageData.occurrenceTime" />
      <br />
      <span class="mt-6 inline-block">文化程度：</span>
      <el-radio v-model="pageData.educationalLevel" label="文盲" />
      <el-radio v-model="pageData.educationalLevel" label="小学" />
      <el-radio v-model="pageData.educationalLevel" label="初中" />
      <el-radio v-model="pageData.educationalLevel" label="高中" />
      <el-radio v-model="pageData.educationalLevel" label="大专" />
      <el-radio v-model="pageData.educationalLevel" label="本科及本科以上" />
      <span class="ml-30">压疮相关知识健康宣传：</span>
      <el-radio v-model="pageData.publicize" label="已做" />
      <el-radio v-model="pageData.publicize" label="未做" />
      <br />
      <div class="flex flex-align-center mt-6">
        <span class="w-4 txt-c">Braden评分<br />（{{ bradenScore }}）分</span>
        <div>
          <span class="inline-block mb-3">评估项目</span>
          <span class="ml-240">1分</span>
          <span class="ml-73">2分</span>
          <span class="ml-73">3分</span>
          <span class="ml-73">4分</span>
          <br />
          <span class="inline-block w-2 mb-3">
            1.感觉：对压迫导致的不适感受的能力
          </span>
          <el-radio v-model="pageData.braden1" class="w-1 mr-20" :label="1"
            >完全受损</el-radio
          >
          <el-radio v-model="pageData.braden1" class="w-1 mr-20" :label="2"
            >严重受损</el-radio
          >
          <el-radio v-model="pageData.braden1" class="w-1 mr-20" :label="3"
            >轻度受损</el-radio
          >
          <el-radio v-model="pageData.braden1" class="w-1 mr-20" :label="4"
            >未受损害</el-radio
          >
          <br />
          <span class="inline-block w-2 mb-3">2.潮湿：皮肤潮湿的程度</span>
          <el-radio v-model="pageData.braden2" class="w-1 mr-20" :label="1"
            >持续潮湿</el-radio
          >
          <el-radio v-model="pageData.braden2" class="w-1 mr-20" :label="2"
            >经常潮湿</el-radio
          >
          <el-radio v-model="pageData.braden2" class="w-1 mr-20" :label="3"
            >偶尔潮湿</el-radio
          >
          <el-radio v-model="pageData.braden2" class="w-1 mr-20" :label="4"
            >很少潮湿</el-radio
          >
          <br />
          <span class="inline-block w-2 mb-3">3.运动量：身体的活动程度</span>
          <el-radio v-model="pageData.braden3" class="w-1 mr-20" :label="1"
            >卧床不起</el-radio
          >
          <el-radio v-model="pageData.braden3" class="w-1 mr-20" :label="2"
            >坐位</el-radio
          >
          <el-radio v-model="pageData.braden3" class="w-1 mr-20" :label="3"
            >偶尔步行</el-radio
          >
          <el-radio v-model="pageData.braden3" class="w-1 mr-20" :label="4"
            >经常步行</el-radio
          >
          <br />
          <span class="inline-block w-2 mb-3"
            >4.控制力：改变控制身体姿势的能力</span
          >
          <el-radio v-model="pageData.braden4" class="w-1 mr-20" :label="1"
            >完全不能</el-radio
          >
          <el-radio v-model="pageData.braden4" class="w-1 mr-20" :label="2"
            >非常受限</el-radio
          >
          <el-radio v-model="pageData.braden4" class="w-1 mr-20" :label="3"
            >轻度受限</el-radio
          >
          <el-radio v-model="pageData.braden4" class="w-1 mr-20" :label="4"
            >不受限制</el-radio
          >
          <br />
          <span class="inline-block w-2 mb-3">5.营养：日常进食的方式</span>
          <el-radio v-model="pageData.braden5" class="w-1 mr-20" :label="1"
            >非常缺乏</el-radio
          >
          <el-radio v-model="pageData.braden5" class="w-1 mr-20" :label="2"
            >可能缺乏</el-radio
          >
          <el-radio v-model="pageData.braden5" class="w-1 mr-20" :label="3"
            >充足</el-radio
          >
          <el-radio v-model="pageData.braden5" class="w-1 mr-20" :label="4"
            >营养丰富</el-radio
          >
          <br />
          <span class="inline-block w-2">6.摩擦和剪力：</span>
          <el-radio v-model="pageData.braden6" class="w-1 mr-20" :label="1"
            >有问题</el-radio
          >
          <el-radio v-model="pageData.braden6" class="w-1 mr-20" :label="2"
            >潜在问题</el-radio
          >
          <el-radio v-model="pageData.braden6" class="w-1 mr-20" :label="3"
            >无明显问题</el-radio
          >
          <br />
        </div>
      </div>
      <div class="flex flex-align-center mt-6 txt-c">
        <span class="w-12 mr-10"
          >压疮情况
          <img
            v-if="type != '打印'"
            class="img add print-hidden"
            src="@/assets/images/add.png"
            @click="addArr"
          />
        </span>
        <div>
          <div class="flex flex-align-center">
            <span class="w-8">编号</span>
            <span class="m-0-2 w-11">部位</span>
            <span class="m-0-2 w-9">分期</span>
            <span class="m-0-2 w-3">大小cm<br />(长×宽×深)</span>
            <span class="m-0-2 w-13">窦道潜行</span>
            <span class="m-0-2 w-4">创面</span>
            <span class="m-0-2 w-5">分泌物</span>
            <span class="m-0-2 w-5">气味</span>
            <span class="m-0-2 w-5">周边皮肤</span>
          </div>
          <div
            v-for="(item, idx) in pageData.situation"
            :key="idx"
            class="relative"
          >
            <span>{{ serial[idx + 1] }}</span>
            <el-cascader
              v-if="type != '打印'"
              v-model="item.position"
              class="w-11"
              :options="partsList"
              :props="cascaderProps"
              :show-all-levels="false"
              collapse-tags
              placeholder=" "
            ></el-cascader>
            <span v-else class="w-11 print-span">{{
              item.position.join('、')
            }}</span>
            <Select
              v-if="type != '打印'"
              v-model="item.byStages"
              class="w-9"
              :data="dicts['skin_periodization']"
              placeholder=" "
            />
            <span v-else class="w-9 print-span">
              {{ item.byStages }}
            </span>
            <input v-model="item.size" class="w-3" />
            <input v-model="item.ddqxFx" class="w-10" />
            <span>点方向</span>
            <input v-model="item.ddqxCm" class="w-10" />
            <span>cm深</span>
            <AutoInput
              v-if="type != '打印'"
              v-model="item.woundSurface"
              class="w-4"
              :data="dicts['skin_woundSurface']"
              placeholder=" "
            />
            <span v-else class="w-4 print-span">
              {{ item.woundSurface }}
            </span>
            <AutoInput
              v-if="type != '打印'"
              v-model="item.secretion"
              class="w-5"
              :data="dicts['skin_secretion']"
              placeholder=" "
              :maxlength="12"
            />
            <span v-else class="w-5 print-span">
              {{ item.secretion }}
            </span>
            <AutoInput
              v-if="type != '打印'"
              v-model="item.smell"
              class="w-5"
              :data="dicts['skin_smell']"
              placeholder=" "
              :maxlength="12"
            />
            <span v-else class="w-5 print-span">
              {{ item.smell }}
            </span>
            <AutoInput
              v-if="type != '打印'"
              v-model="item.peripheralSkin"
              class="w-5"
              :data="dicts['skin_peripheral']"
              placeholder=" "
              :maxlength="12"
            />
            <span v-else class="w-5 print-span">
              {{ item.peripheralSkin }}
            </span>
            <img
              v-if="type != '打印'"
              class="img print-hidden"
              src="@/assets/images/del.png"
              @click="delArr(idx)"
            />
          </div>
        </div>
      </div>
      <span class="w-4 inline-block txt-c mt-6">申报</span>
      <el-checkbox v-model="pageData.report" label="院外压疮" class="mr-20" />
      <el-checkbox v-model="pageData.report" label="院内压疮" class="mr-20" />
      <el-checkbox v-model="pageData.report" label="高危压疮" class="mr-20" />
      <span>（</span>
      <el-checkbox v-model="pageData.report" label="难免压疮" />
      <span>）</span>
      <br />
      <span class="w-4 inline-block txt-c mt-6">基本条件</span>
      <el-checkbox v-model="pageData.condition" label="强迫体位" />
      <br />
      <span class="w-4 inline-block txt-c mt-6">危险因素</span>
      <el-checkbox
        v-model="pageData.factors"
        label="高龄（≥70岁）"
        class="mr-20"
      />
      <el-checkbox
        v-model="pageData.factors"
        label="白蛋白<30g/L"
        class="mr-20"
      />
      <el-checkbox v-model="pageData.factors" label="极度消瘦" class="mr-20" />
      <el-checkbox v-model="pageData.factors" label="高度水肿" class="mr-20" />
      <el-checkbox v-model="pageData.factors" label="大小便失禁" />
      <br />
      <span class="ml-84 mt-3 inline-block">
        （备注：具备基本条件和危险因素五项中的一项或几项可以申报难免压疮）
      </span>
      <br />
      <span class="block p-10-0 txt-c">护理措施</span>
      <div class="flex flex-align-center">
        <span class="w-4 txt-c">皮肤护理</span>
        <div class="flex-1">
          <el-checkbox
            v-model="pageData.skin"
            class="mb-3"
            label="使用中性/温和的清洁剂清洁皮肤"
          />
          <el-checkbox
            v-model="pageData.skin"
            label="使用乳液维持皮肤湿润"
            style="margin-left: 50px"
          />
          <el-checkbox
            v-model="pageData.skin"
            label="使用皮肤保护膜和护肤粉"
            style="margin-left: 73px"
          />
          <el-checkbox
            v-model="pageData.skin"
            class="mb-3"
            label="保持床单位、衣物的清洁平整"
          />
          <el-checkbox
            v-model="pageData.skin"
            label="使用吸收垫控制潮湿，及时更换"
            style="margin-left: 69px"
          />
          <br />
          <el-checkbox
            v-model="pageData.skin"
            label="正确摆放管道，预防管道压迫"
          />
        </div>
      </div>
      <div class="flex flex-align-center mt-6">
        <span class="w-4 txt-c">体位与活动</span>
        <div class="flex-1">
          <el-checkbox
            v-model="pageData.positions"
            class="mb-3"
            label="定期翻身更换体位少于(Q2h)"
          />
          <el-checkbox
            v-model="pageData.positions"
            label="建立翻身卡"
            style="margin-left: 73px"
          />
          <el-checkbox
            v-model="pageData.positions"
            label="侧卧位<30° 床头太高<30°"
            style="margin-left: 138px"
          />
          <br />
          <el-checkbox
            v-model="pageData.positions"
            label="坐轮椅至少每15-30分钟抬臀一次"
          />
          <el-checkbox
            v-model="pageData.positions"
            label="指导执行肢体主动/被动运动"
            style="margin-left: 46px"
          />
        </div>
      </div>
      <div class="flex flex-align-center mt-6">
        <span class="w-4 txt-c">用辅助用具</span>
        <div class="flex-1">
          <el-checkbox
            v-model="pageData.tools"
            class="mb-3"
            label="骨突处予防护"
          />
          <el-checkbox
            v-model="pageData.tools"
            label="使用软枕、翻身垫以及其他辅助支撑物"
            style="margin-left: 160px"
          />
          <br />
          <el-checkbox v-model="pageData.tools" label="气垫床" />
          <el-checkbox
            v-model="pageData.tools"
            label="翻身床"
            style="margin-left: 72px"
          />
          <el-checkbox
            v-model="pageData.tools"
            label="悬浮床"
            style="margin-left: 66px"
          />
          <el-checkbox
            v-model="pageData.tools"
            label="使用辅助器具（移位板、翻身单）搬运病人"
            style="margin-left: 70px"
          />
        </div>
      </div>
      <div class="flex flex-align-center mt-6">
        <span class="w-4 txt-c">敷料使用</span>
        <div class="flex-1">
          <el-checkbox
            v-model="pageData.dressings"
            class="mb-3"
            label="使用水胶体敷料如溃疡贴、安普贴"
          />
          <el-checkbox
            v-model="pageData.dressings"
            label="使用泡沫类敷料"
            style="margin-left: 43px"
          />
          <el-checkbox
            v-model="pageData.dressings"
            label="局部伤口按外科换药处理"
            style="margin-left: 112px"
          />
          <br />
          <el-checkbox v-model="pageData.dressings" label="局部创面贴透明贴" />
          <el-checkbox
            v-model="pageData.dressings"
            label="局部创面贴溃疡贴"
            style="margin-left: 134px"
          />
          <el-checkbox
            v-model="pageData.dressings"
            label="其他敷料或产品"
            style="margin-left: 99px"
          />
        </div>
      </div>
      <div class="flex flex-align-center mt-6">
        <span class="w-4 txt-c">患者及家属<br />健康教育</span>
        <div class="flex-1">
          <el-checkbox
            v-model="pageData.healthEducation"
            class="mb-3"
            label="指导压疮防护目的及方法"
          />
          <el-checkbox
            v-model="pageData.healthEducation"
            label="加强营养、采取适当的营养支持"
            style="margin-left: 95px"
          />
          <br />
          <el-checkbox
            v-model="pageData.healthEducation"
            label="保持皮肤清洁干燥"
          />
          <el-checkbox
            v-model="pageData.healthEducation"
            label="指导翻身、肢体活动及保护用品的使用方法"
            style="margin-left: 134px"
          />
        </div>
      </div>
      <div class="flex flex-align-center flex-end mt-6">
        <span>填表人：</span>
        <input v-model="pageData.fillName" class="w-4 p-2 m-0" />
        <span class="ml-10">护士长签名：</span>
        <input v-model="pageData.nurseName" class="w-4 p-2 m-0" />
        <span class="ml-10">填表日期：</span>
        <DatePicker
          v-model="pageData.fillDate"
          select-interval
          value-format="timestamp"
          format="yyyy-MM-dd"
          clearable
        />
      </div>
      <div class="flex mt-6">
        <span class="w-4 txt-c">压疮护理专业小组会诊意见：</span>
        <el-input
          v-if="type != '打印'"
          v-model="pageData.expertOpinion"
          class="textarea"
          type="textarea"
          :autosize="{ minRows: 3 }"
          size="mini"
        />
        <span v-else class="textarea">{{ pageData.expertOpinion }}</span>
      </div>
      <div class="flex flex-align-center flex-end mt-6">
        <span>会诊专家签名：</span>
        <input v-model="pageData.expertName" class="w-4 p-2 m-0" />
        <span class="ml-38">日期：</span>
        <DatePicker
          v-model="pageData.consultationDate"
          select-interval
          value-format="timestamp"
          format="yyyy-MM-dd"
          clearable
        />
      </div>
      <div class="flex mt-6">
        <span class="w-4 txt-c">跟踪督查记录：</span>
        <el-input
          v-if="type != '打印'"
          v-model="pageData.followRecord"
          class="textarea"
          type="textarea"
          :autosize="{ minRows: 3 }"
          size="mini"
        />
        <span v-else class="textarea">{{ pageData.followRecord }}</span>
      </div>
      <span class="w-4 txt-c inline-block mt-6">转归情况</span>
      <span>1.压疮：</span>
      <el-radio v-model="pageData.transfer1" label="愈合" />
      <el-radio v-model="pageData.transfer1" label="好转" />
      <el-radio v-model="pageData.transfer1" label="未愈" />
      <el-radio v-model="pageData.transfer1" label="恶化" />
      <span class="ml-15">2.高危压疮：</span>
      <el-radio v-model="pageData.transfer2" label="压疮未发生" />
      <el-radio v-model="pageData.transfer2" label="压疮新发生" />
      <br />
      <span class="mt-6 w-4 txt-c inline-block">患者去向</span>
      <el-radio v-model="pageData.destination" label="转科" />
      <el-radio v-model="pageData.destination" label="出院" />
      <el-radio v-model="pageData.destination" label="转院" />
      <el-radio v-model="pageData.destination" label="死亡" />
      <div class="flex flex-align-center flex-end mt-6">
        <span>护士长签名：</span>
        <input v-model="pageData.supervisionNurseName" class="w-4 p-2 m-0" />
        <span class="ml-10">填表日期：</span>
        <DatePicker
          v-model="pageData.supervisionNurseDate"
          select-interval
          value-format="timestamp"
          format="yyyy-MM-dd"
          clearable
        />
      </div>
    </div>
  </div>
</template>
<script>
import { cloneDeep, pick } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import { getDictByType } from '@/api/system/dictDetail'
import AutoInput from '@/components/MyComp/AutoInput.vue'
import DatePicker from '@/components/MyComp/DatePicker.vue'
import Select from '@/components/MyComp/Select.vue'

import DocHeader from '../DocHeader.vue'
import { baseData, serial, situationTemp } from './baseData.js'

export default defineComponent({
  components: {
    DocHeader,
    DatePicker,
    Select,
    AutoInput
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    dicts: {
      type: Object,
      default: () => ({})
    },
    otherData: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      pageData: '',
      partsList: [], //皮肤部位列表
      cascaderProps: { multiple: true, emitPath: false } // 皮肤组件配置
    })
    // 自动计算braden分数
    const bradenScore = computed(() => {
      const arr = [
        'braden1',
        'braden2',
        'braden3',
        'braden4',
        'braden5',
        'braden6'
      ]
      let score = 0
      arr.map(res => (score += state.pageData[res] * 1))
      return score
    })

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(cloneDeep(baseData), jsonText)
      } else {
        nextTick(() => {
          state.pageData = cloneDeep(baseData)
        })
      }
    }
    if (props.type != '打印') {
      getSkinParts()
    }
    // 获取皮肤部位
    function getSkinParts() {
      getDictByType({ type: 'skin_parts' }).then(({ data }) => {
        if (data) {
          const createTreeData = list => {
            const arr = []
            list.forEach(v => {
              const obj = {
                value: v.id ? v.name : v.label,
                label: v.id ? v.name : v.label
              }
              if (v.name && Array.isArray(v.name) && v.name.length > 0) {
                obj.children = createTreeData(v.name)
              }
              arr.push(obj)
            })
            return arr
          }
          const treeData = createTreeData(data)
          state.partsList = treeData
        }
      })
    }
    function getParams() {
      return state.pageData
    }

    // 新增压疮情况
    function addArr() {
      state.pageData.situation.push(situationTemp)
    }
    // 删除压疮情况
    function delArr(idx) {
      state.pageData.situation.splice([idx], 1)
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    // 导入最新一条braden评分
    watch(
      () => props.otherData,
      val => {
        if (val.data) {
          if (val.data.pgRecordDetailVos) {
            // 取有选项的值
            val.data.pgRecordDetailVos.map((res, idx) => {
              if (
                res.srxVO.normalDetailList &&
                res.srxVO.srxTypeCode == '单选'
              ) {
                const obj = res.srxVO.normalDetailList.find(
                  _res => _res.id == res.detailId
                )
                state.pageData[`braden${idx + 1}`] = obj.score
              }
            })
          }
          if (val.yc.length > 0) {
            const keys = Object.keys(situationTemp)
            const arr = []
            val.yc.map(res => {
              res.size = `${res.sizeLong || ''}×${res.sizeWide}×${res.sizeDeep}`
              arr.push(pick(res, keys))
            })
            state.pageData.situation = arr
          } else {
            state.pageData.situation = [cloneDeep(situationTemp)]
          }
        }
      },
      { deep: true }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      bradenScore,
      serial,
      getParams,
      addArr,
      delArr
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';
$border: 1px solid #000;

::v-deep .el-checkbox {
  margin: 0 5px;
}

.mt-6 {
  margin-top: 6px;
}

.container1 {
  padding: 20px 0;
  // margin: getpx(30) auto 0;
  // width: calc(100% - 66px);
  font-family: SiYuanSong-Medium;
  text-align: start;

  span {
    font-size: 14px;
  }

  .print-span {
    display: inline-block;
    font-size: 12px;
    border-bottom: 1px solid;
    vertical-align: text-bottom;
    word-break: break-all;
  }
}

.bor-t-box {
  margin-bottom: 10px;
  width: 100%;
  border-top: 1px solid #000;
}

.mt {
  &-3 {
    margin-top: 3px;
  }
}

.ml {
  &-30 {
    margin-left: 30px;
  }

  &-38 {
    margin-left: 38px;
  }

  &-42 {
    margin-left: 42px;
  }

  &-50 {
    margin-left: 50px;
  }

  &-60 {
    margin-left: 60px;
  }

  &-70 {
    margin-left: 70px;
  }

  &-73 {
    margin-left: 73px;
  }

  &-84 {
    margin-left: 84px;
  }

  &-240 {
    margin-left: 240px;
  }
}

.mb {
  &-3 {
    margin-bottom: 3px;
  }

  &-10 {
    margin-bottom: 10px;
  }
}

.mr {
  &-10 {
    margin-right: 10px;
  }

  &-15 {
    margin-right: 15px;
  }

  &-20 {
    margin-right: 20px;
  }
}

.m-0 {
  margin: 0;
}

.m-0-2 {
  margin: 0 2px;
}

.p-2 {
  padding: 2px;
}

.p-10-0 {
  padding: 10px 0;
}

.txt-c {
  text-align: center;

  input {
    text-align: center;
  }
}

.w-1 {
  width: 75px;
}

.w-2 {
  width: 260px;
}

.w-3 {
  width: 89px;
}

.w-4 {
  width: 90px !important;

  :deep {
    .el-input {
      width: 90px;
    }
  }
}

.w-5 {
  width: 76px !important;

  :deep {
    .el-input {
      width: 76px;
    }
  }
}

.w-6 {
  width: 66px;
}

.w-7 {
  width: 100px;
}

.w-8 {
  width: 14px;
}

.w-9 {
  width: 74px;

  :deep {
    .el-input {
      width: 74px;
    }
  }
}

.w-10 {
  width: 25px;
}

.w-11 {
  width: 116px;
}

.w-12 {
  width: 60px;
}

.w-13 {
  width: 127px;
}

.relative {
  position: relative;
}

input {
  margin: 4px 2px;
  border-bottom: 1px solid;
  font-size: 12px;
}

.flex-end {
  justify-content: flex-end;
}

::v-deep {
  .textarea {
    flex: 1;
    margin-left: 5px;

    .el-textarea__inner {
      padding: 0;
      font-size: 14px;
      color: #000;
      border: none;
      line-height: 1.15;
      resize: none;
      word-break: break-all;
    }
  }

  .el-cascader__tags {
    width: 100%;
    transform: translateY(-61%);

    .el-tag {
      max-width: 60%;
    }
  }

  .el-date-editor {
    padding: 2px;
    width: 100px;
    border-bottom: 1px solid;

    .el-input__inner {
      font-size: 14px;
    }

    .el-input__suffix {
      display: inline-block;
    }
  }

  .el-select,
  .el-autocomplete {
    margin: 4px 2px;
    border-bottom: 1px solid;

    .el-input__suffix {
      display: inline-block;
      right: -6px;
      top: -3px;

      .el-icon-arrow-up {
        display: none;
      }

      .el-icon-circle-close {
        color: red;
      }
    }

    .el-input__inner {
      text-align: center;
      height: 15px;
      line-height: 15px;
    }
  }

  .el-cascader {
    border-bottom: 1px solid;
    line-height: 15px;
  }

  .el-cascader__search-input {
    height: 15px;
  }

  .el-input .el-input__inner {
    height: 15px !important;
    font-size: 12px;
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
  }

  input:disabled {
    color: #000;
    background: #fff;
  }

  .el-cascader__search-input {
    margin-left: 0;
  }
}

.img {
  width: 20px;
  vertical-align: sub;
  cursor: pointer;

  &.add {
    margin: 5px 10px 0 0;
  }

  &:not(.add) {
    position: absolute;
    right: -20px;
    top: 3px;
  }
}

.print {
  ::v-deep {
    .el-select {
      padding-bottom: 1px;
      transform: translateY(-1px);
    }
  }

  .container1 {
    .print-spans {
      padding-bottom: 1px;
      transform: translateY(1px);
    }
  }

  input {
    padding-bottom: 1px;
    line-height: 14px;
  }
}
</style>
